import { Component,ElementRef, ViewChild } from '@angular/core';
import {HttpService} from '../provider.service';
import {IonSlides} from '@ionic/angular';
import * as echarts from 'echarts';
import sd from 'silly-datetime'

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  @ViewChild('echarts',null) myCharts:ElementRef;
  @ViewChild('echarts1',null) myCharts1:ElementRef;
  @ViewChild('echarts2',null) myCharts2:ElementRef;
  @ViewChild(IonSlides,null) slides:IonSlides;
  datas:any;
  stationArr:any;
  options:any;
  lineArr:any;
  constructor(private httpService:HttpService) {
    
    this.datas=[
      {
        'stationid':0,
        'stationState':0,
        'stationName':'a站',
        'currentFlow':500
      },
      {
        'stationid':1,
        'stationState':1,
        'stationName':'b站',
        'currentFlow':500
      },
      {
        'stationid':555,
        'stationState':1,
        'stationName':'c站',
        'currentFlow':600
      }
    ]
  }
  getApiData(){
    let arr=[]
    this.httpService.post("index/getStatData",null).then(res=>{
      
    
      if(res.length>0){
        this.datas = res;
        for(var i=0;i<res.length;i++){
          arr.push(res[i].stationid)
        }
        this.stationArr=arr
      }
    });
    this.httpService.post("getDataListByDT",null).then(res=>{
      if(res&&res.length>0){
        this.initCharts(res,arr,this.datas)
      }
      
    });
  }
  ionViewWillEnter(){
    let optionsd={
      xAxis: {
        type: 'time',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
      }]
  
    };  
    this.slides.startAutoplay()
    const ec = echarts as any;
    ec.init(this.myCharts.nativeElement).setOption(optionsd,true);
    ec.init(this.myCharts1.nativeElement).setOption(optionsd,true);
    ec.init(this.myCharts2.nativeElement).setOption(optionsd,true);
    // this.initCharts(this.lineArr,this.stationArr);
    this.getApiData();
  };
  ionViewWillLeave(){
    this.slides.stopAutoplay()
  }
  selectStation(id){
    console.log(id)
  };
  initCharts(data,arr,arrData){
    const ec = echarts as any;
    console.log(arr,arrData)
    var sta1=arr[0];
    var sta2=arr[1]
    var sta3=arr[2]
    var arr1=data.filter(function(item){
      return item.stcd == sta1;
    })
    var arr2=data.filter(function(item){
      return item.stcd == sta2;
    })
    var arr3=data.filter(function(item){
      return item.stcd == sta3;
    })
    console.log(arr1,arr2,arr3);
    
    var xAxisdata=[];
    var seriesllData=[];
    var serieslsData=[];
    arr1.forEach((val) => {
      var time=sd.format(val.dt, 'YYYY-MM-DD HH:mm:ss')
      xAxisdata.push(time);

      seriesllData.push((val.q+val.rawq));
      serieslsData.push(val.avgv1)
    });
    let optoins={
      title: {
        text: arrData[0].stationName
    },
      legend: {
        data:['流量','流速',]
    },
      xAxis: {
        type: 'category',
        data: xAxisdata
      },
      yAxis: [
        {
        type: 'value'
        },
        {
          type: 'value'
          }
      ],
      series: [{
        data: seriesllData,
        type: 'line',
        smooth: true,
        symbolSize:12,
        yAxisIndex: 0,
        name:"流量"
      },{
        data: serieslsData,
        type: 'line',
        smooth: true,
        symbolSize:12,
        yAxisIndex: 1,
        name:"流速"
      }]
  
    }
    console.log(optoins)
    ec.init(this.myCharts.nativeElement).setOption(optoins,true);

    var xAxisdata1=[];
    var seriesllData1=[];
    var serieslsData1=[];
    arr2.forEach((val) => {
      var time=sd.format(val.dt, 'YYYY-MM-DD HH:mm:ss')
      xAxisdata1.push(time);

      seriesllData1.push((val.q+val.rawq));
      serieslsData1.push(val.avgv1)
    });
    let optoins1={
      title: {
        text: arrData[1].stationName
    },
      legend: {
        data:['流量','流速',]
    },
      xAxis: {
        type: 'category',
        data: xAxisdata1
      },
      yAxis: [
        {
        type: 'value'
        },
        {
          type: 'value'
          }
      ],
      series: [{
        data: seriesllData1,
        type: 'line',
        smooth: true,
        symbolSize:12,
        yAxisIndex: 0,
        name:"流量"
      },{
        data: serieslsData1,
        type: 'line',
        smooth: true,
        symbolSize:12,
        yAxisIndex: 1,
        name:"流速"
      }]
  
    }
    
    ec.init(this.myCharts1.nativeElement).setOption(optoins1,true);

    var xAxisdata2=[];
    var seriesllData2=[];
    var serieslsData2=[];
    arr3.forEach((val) => {
      var time=sd.format(val.dt, 'YYYY-MM-DD HH:mm:ss')
      xAxisdata2.push(time);

      seriesllData2.push((val.q+val.rawq));
      serieslsData2.push(val.avgv1)
    });
    let optoins2={
      title: {
        text: arrData[2].stationName
    },
      legend: {
        data:['流量','流速',]
    },
      xAxis: {
        type: 'category',
        data: xAxisdata2
      },
      yAxis: [
        {
        type: 'value'
        },
        {
          type: 'value'
          }
      ],
      series: [{
        data: seriesllData2,
        type: 'line',
        smooth: true,
        symbolSize:12,
        yAxisIndex: 0,
        name:"流量"
      },{
        data: serieslsData2,
        type: 'line',
        smooth: true,
        symbolSize:12,
        yAxisIndex: 1,
        name:"流速"
      }]
  
    }
    
    ec.init(this.myCharts2.nativeElement).setOption(optoins2,true);
  }
}
